<template>
  <div class="mine">
    <div class="fanhui">
      <van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="back"> </van-nav-bar>
    </div>
    <div class="box">
      <div class="box-1">
        <van-image class="box-1-1" fit="cover" round :src="userInfo.avatar" />
        <div class="box-1-2">
          <span class="box-1-3">用户名 : {{ userInfo.uname }}</span>
          <span class="box-1-3">手机号 : {{ userInfo.phone }}</span>
          <span class="box-1-3">个性签名 : {{ userInfo.autograph || '这个人很懒声明也没有写' }}</span>
        </div>
      </div>
    </div>
    <div class="ww"></div>
    <van-cell title="我的旅行" is-link to="/travelOrder" />
    <van-cell title="我的订制" is-link to="/customOrder" />
    <van-cell title="账号管理" is-link to="/admin" />
    <my-footer></my-footer>
  </div>
</template>
<script>
import { getUserInfo } from '../server/user.js';
export default {
  data() {
    return {
      token: localStorage.getItem('token'), //token
      userInfo: {}, //用户信息
    };
  },
  mounted() {
    //判断用户是否登录
    this.isLogin();
  },
  methods: {
    //判断用户是否登录
    isLogin() {
      if (this.token == null) {
        this.$toast.fail('未登录,为您跳转登录页面');
        this.$router.push('/login');
      } else {
        getUserInfo(this.token)
          .then((result) => {
            this.userInfo = result[0];
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 返回上一页
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss">
.mine {
  .van-icon-arrow-left {
    color: #000;
  }
  .van-nav-bar__text {
    font-size: 14px;
    color: #000;
  }
  //表单项的字体大小
  .van-cell__title {
    font-size: 18px;
    line-height: 2;
  }
  .van-icon-arrow {
    font-size: 20px;
  }
  .box {
    width: 95%;
    height: 3.06667rem;
    background-color: #63c6c2;
    border-radius: 0.16rem;
    box-shadow: 0 0.05333rem 0.13333rem #269090;
    margin: 3%;
    .box-1 {
      height: 100%;
      border-radius: 50%;
      box-sizing: border-box;
      padding: 0.66667rem 0.53333rem;
      color: #fff;
      display: flex;
      .box-1-1 {
        width: 1.6rem;
        height: 1.6rem;
      }
      .box-1-2 {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin-left: 0.26667rem;
        line-height: 0.53333rem;
        font-size: 0.37333rem;
        color: #fff;
      }
      .box-1-3 {
        color: #fff;
        font-size: 0.37333rem;
        padding: 0.05333rem 0;
      }
    }

    .box-1-4 {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-top: 9%;
      color: #fff;
      font-size: 20px;
    }
  }
  .box-2-2 {
    font-size: 25px;
    line-height: 2;
    margin-top: 24px;
    padding: 0 16px;
  }
  .box-2-3 {
    display: flex;
    text-align: center;
    line-height: 2;
    justify-content: space-around;
    margin-top: 3%;
    font-size: 15px;
  }
  .box-3 {
    display: flex;
    text-align: center;
    line-height: 2;
    justify-content: space-around;
    margin-top: 3%;
    font-size: 15px;
  }
}
</style>
